<template>
  <div
    :class="[
      user_sign_border,
      css_border_top_6,
      css_content_padding,
      css_child_margin_top,
      css_wind_light_hover,
      css_color_active_border_hover,
    ]"
    :id="user_sign_border"
  >
    <div :class="[title_user_sign, css_h1]">
      {{ placeholder_title_user_sign }}
    </div>

    <div
      :class="[
        user_sign_name,
        css_content_padding,
        css_child_margin_top,
        css_wind_light_hover,
        css_child_margin_top,
      ]"
      :id="user_sign_name"
    >
      <div :class="[title_user_sign_name, css_title_world_gray]">
        {{ placeholder_title_user_sign_name }}
      </div>
      <input
        :class="[user_sign_inp, css_font_size_20, user_sign_name_inp]"
        type="text"
        :id="user_sign_name_inp"
      />
    </div>

    <div
      :class="[
        user_sign_identity,
        css_content_padding,
        css_wind_light_hover,
        css_child_margin_top,
      ]"
      :id="user_sign_identity"
    >
      <div :class="[title_user_sign_identity, css_title_world_gray]">
        {{ placeholder_title_user_sign_identity }}
      </div>
      <input
        :class="[user_sign_inp, css_font_size_20, user_sign_identity_inp]"
        type="text"
        :id="user_sign_identity_inp"
      />
    </div>

    <div
      :class="[
        user_sign_phone,
        css_content_padding,
        css_wind_light_hover,
        css_child_margin_top,
      ]"
      :id="user_sign_phone"
    >
      <div :class="[title_user_sign_phone, css_title_world_gray]">
        {{ placeholder_title_user_sign_phone }}
      </div>
      <input
        :class="[user_sign_inp, css_font_size_20, user_sign_phone_inp]"
        type="text"
        :id="user_sign_phone_inp"
      />
    </div>

    <div
      :class="[
        user_sign_passworld,
        css_content_padding,
        css_wind_light_hover,
        css_child_margin_top,
      ]"
      :id="user_sign_passworld"
    >
      <div :class="[title_user_sign_passworld, css_title_world_gray]">
        {{ placeholder_title_user_sign_passworld }}
      </div>
      <input
        :class="[user_sign_inp, css_font_size_20, user_sign_passworld_inp]"
        type="password"
        :id="user_sign_passworld_inp"
      />
    </div>

    <div
      :class="[
        user_sign_passworld_certain,
        css_content_padding,
        css_wind_light_hover,
        css_child_margin_top,
      ]"
      :id="user_sign_passworld_certain"
    >
      <div :class="[title_user_sign_passworld_certain, css_title_world_gray]">
        {{ placeholder_title_user_sign_passworld_certain }}
      </div>
      <input
        :class="[
          user_sign_inp,
          css_font_size_20,
          user_sign_passworld_certain_inp,
        ]"
        type="password"
        :id="user_sign_passworld_certain_inp"
      />
    </div>

    <div :class="[user_sign_func_border]" :id="user_sign_func_border">
      <div
        :class="[
          user_sign_func_submit,
          css_wind_light_hover,
          css_content_padding,
          css_cursor_pointer,
        ]"
        :id="user_sign_func_submit"
      >
        {{ placeholder_user_sign_func_submit }}
      </div>
    </div>

    <div
      :class="[
        user_signed_login,
        css_h1,
        css_content_padding,
        css_color_active,
        css_disnone,
      ]"
      :id="user_signed_login"
    >
      {{ placeholder_user_signed_login }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import './user_sign.css';
import { init_user_sign } from './user_sign';
import {
  css_border_top_6,
  css_child_margin_top,
  css_color_active,
  css_color_active_border_hover,
  css_content_padding,
  css_cursor_pointer,
  css_disnone,
  css_font_size_20,
  css_h1,
  css_title_world_gray,
  css_wind_light_hover,
} from '../../../global_comps/Css';
import {
  placeholder_title_user_sign_passworld_certain,
  placeholder_title_user_sign_identity,
  placeholder_title_user_sign_passworld,
  placeholder_title_user_sign_name,
  title_user_sign_passworld_certain,
  title_user_sign_identity,
  title_user_sign_name,
  title_user_sign_passworld,
  user_sign_border,
  user_sign_passworld_certain,
  user_sign_passworld_certain_inp,
  user_sign_identity,
  user_sign_identity_inp,
  user_sign_name,
  user_sign_name_inp,
  user_sign_passworld,
  user_sign_passworld_inp,
  user_sign_inp,
  title_user_sign,
  placeholder_title_user_sign,
  user_sign_func_border,
  user_sign_func_submit,
  placeholder_user_sign_func_submit,
  user_sign_phone_inp,
  placeholder_title_user_sign_phone,
  title_user_sign_phone,
  user_sign_phone,
  user_signed_login,
  placeholder_user_signed_login,
} from './DataDefine/sourceData';

let cur_user_sign_props = defineProps({});

onMounted(() => {
  init_user_sign();
});
</script>
